<template>
	<view class="card">
		<p>{{ card_num || 0}} <text>积分</text></p>
		<view class="btn" v-show="show==true">
			<view class="button1" @tap.stop="jump(taskUrl)">
				<span>赚积分</span>
			</view>
			<view class="button2" @tap.stop="jump(shareUrl)">
				<span>共享积分</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskUrl: '/pages/user/score/earn/index',
				shareUrl: '/pages/user/score/share/index',
			}
		},
		props: {
			card_num: {
				type: [Number, String],
				default: ''
			},
			show: { //是否显示两个按钮，默认不显示
				type: Boolean,
				default: false
			},
			text_show: { //是否显示积分两个字，默认不显示
				type: Boolean,
				default: false
			}
		},
		methods: {
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 48rpx 32rpx;
		border-radius: 16rpx;
		background-image: url('/static/image/card1.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;

		p {
			font-size: 64rpx;
			color: #fff;
			line-height: 64rpx;
			padding-bottom: 24rpx;
			text {
				font-size: 32rpx;
			}
		}


		.button1 {
			display: inline-block;
			border-radius: 32rpx;
			background: linear-gradient(to bottom, #FFFFFF, #FFD6CB);

			span {
				font-size: 28rpx;
				color: #FF4642;
				padding: 20rpx 32rpx;
				line-height: 60rpx;
			}
		}

		.button2 {
			margin-left: 16rpx;
			display: inline-block;
			border-radius: 28rpx;
			border: 2rpx solid #fff;

			span {
				font-size: 32rpx;
				color: #fff;
				padding: 20rpx 32rpx;
				line-height: 60rpx;
			}
		}
	}
</style>
